<template>
	<view>
		<view class="fabSlide" v-if="isOpen" @touchmove.stop="() => {}">
			<view class="sildeBox">
				<view class="sildeItem" @click="goProjectManagement('add')">项目登记</view>
				<view class="sildeItem" @click="goProjectManagement('')">全部项目</view>
				<view class="sildeItem" @click="goProjectManagement('attention')">关注项目</view>
				<!-- <view class="sildeItem" @click="goProjectManagement('isShow')">
					许可分类
					<view class="rightSlide" v-if="isTypeListShow">
						<view class="rightArrow"></view>
						<view
							class="rightSlideItem"
							v-for="item in projectTypeList"
							:key="item.getProjectTypeList"
						>
							{{ item.project_type_name }}
						</view>
						<view class="rightSlideItem">分类1</view>
					</view>
				</view> -->
				<view class="sildeItem" @click="goProjectManagement('6')">归档项目</view>
				<view class="sildeItem" @click="goProjectManagement('tongji')">项目统计</view>
			</view>
		</view>
		<view class="fabBtn" @touchmove.stop="() => {}">
			<!-- <img
				src="../static/images/xiangmu1@2x.png"
				v-if="!isOpen"
				style="width: 137rpx;height: 137rpx;"
				@click="handleFabClick(true)"
				alt=""
			/> -->
			<image src="../static/images/xiangmu1@2x.png"
				v-if="!isOpen"
				style="width: 137rpx;height: 137rpx;"
				@click="handleFabClick(true)"
				alt=""></image>
			<image src="../static/images/xiangmu2@2x.png"
				v-if="isOpen"
				style="width: 137rpx;height: 137rpx;"
				@click="handleFabClick(false)"
				alt=""></image>
			<!-- <img
				src="../static/images/xiangmu2@2x.png"
				v-if="isOpen"
				style="width: 137rpx;height: 137rpx;"
				@click="handleFabClick(false)"
				alt=""
			/> -->
		</view>
		<view
			class="mask"
			@touchmove.stop="() => {}"
			@click="handleFabClick(false)"
			v-if="isOpen"
		></view>
	</view>
</template>

<script>
export default {
	name: 'project-button',
	data() {
		return {
			isOpen: false,
			isTypeListShow: false,
			// 立项
			company_id: '',
			member_id: '',
			token: '',
			checkId: '',
			projectCodeS: ''
		};
	},
	created() {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		// console.log('文件上传组件的merid',this.member_id)
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
	},
	methods: {
		// 悬浮按钮点击
		handleFabClick(val) {
			this.isOpen = val;
		},
		goProjectManagement(val) {
			// console.log(123)
			if (val == 'isShow' && this.isTypeListShow == true) {
				return (this.isTypeListShow = false);
			}
			if (val == 'isShow') {
				return (this.isTypeListShow = true);
			}
			if (val == 'add') {
				return uni.navigateTo({
					url: `/packageProject/pages/project/projectRegist?isAdd=1`
				});
			}
			if (val == 'tongji') {
				return uni.navigateTo({
					url: `/packageProject/pages/project/projectStat/stat`
				});
			}
			if (val == '6') {
				return uni.navigateTo({
					url: `/packageProject/pages/project/projectManagement?status=${val}`
				});
			}
			uni.navigateTo({
				url: `/packageProject/pages/project/projectManagement?type=${val}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.mask {
	position: fixed;
	right: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: 0.5;
	z-index: 999;
}

/* #ifdef MP-WEIXIN */
.fabBtn {
	bottom: 120rpx;
}

/* #endif */

/* #ifdef H5 */
.fabBtn {
	bottom: 200rpx;
}

/* #endif */

/* #ifdef H5 */
.fabSlide {
	bottom: 360rpx;
}

/* #endif */

// 悬浮按钮
.fabBtn {
	position: fixed;
	z-index: 1111;
	bottom: 120rpx;
	right: 20rpx;

	img {
		width: 137rpx;
		height: 137rpx;
	}
}

.fabSlide {
	width: 140rpx;
	height: 486rpx;
	background: #efefef;
	// opacity: 0.4;
	border-radius: 65rpx;
	position: fixed;
	right: 15rpx;
	bottom: 280rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1111;

	.sildeBox {
		width: 100%;

		.sildeItemNoDis {
			background-color: #40a0f2;
			color: #fff;
		}
		.sildeItemDis1 {
			background-color: #edf7ff !important;
			color: #999 !important;
		}

		.sildeItem {
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1112;
			font-size: 26rpx;
			color: #fff;
			height: 58rpx;
			width: 100%;
			margin-top: 2rpx;
			background-color: #40a0f2;
			opacity: 1;
			position: relative;

			.rightSlide {
				position: absolute;
				right: 150rpx;
				top: 5rpx;
				width: 268rpx;

				font-size: 24rpx;
				color: #666;
				box-sizing: border-box;

				.rightArrow {
					position: absolute;
					right: -20rpx;
					top: 10rpx;
					border: 10rpx solid rgba(0, 0, 0, 0);
					border-left-color: #edf7ff;
					width: 0;
					height: 0;
				}

				.rightSlideItem {
					height: 60rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					// padding-top: 10rpx;
					background-color: #edf7ff;
					border-bottom: 1px solid #e3e3e3;
				}

				.rightSlideItemNoDis {
					background-color: #40a0f2 !important;
					color: #fff;
				}

				.rightSlideItem:nth-child(2) {
					border-radius: 10rpx 10rpx 0 0 !important;
				}

				.rightSlideItem:last-child {
					border-radius: 0 0 10rpx 10rpx !important;
				}

				.rightSlideItem:last-child {
					border-bottom: none;
				}
			}
		}
	}
}
</style>
